<template>
	<div style="width: 95%;margin: 0 auto;">
		<el-dialog v-model="showAddView" width="550px" title="类型信息">
			<template #footer>
				<el-form ref="from">
					<el-row class="from-item">
						<label>PID：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.pid"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>父类型：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.plabel"></el-input>
					</el-row>
					  <el-divider></el-divider>
					<el-row class="from-item">
						<label>本ID：</label>
						<el-input style="width: 80%;" size="mini" readonly
						v-model.lazy.trim="form.id"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>本类型：</label>
						<el-input style="width: 80%;" size="mini"
						v-model.lazy.trim="form.type" placeholder="请输入添加类型名称"></el-input>
					</el-row>
					<el-row class="from-item">
						<label>优先级：</label>
						<el-input style="width: 80%;" size="mini"
						v-model.lazy.trim="form.prio"></el-input>
					</el-row>
				</el-form>
				<span class="dialog-footer">
					<el-button @click="showAddView=false">取消</el-button>
					<el-button type="primary" @click="addType()">添加</el-button>
				</span>
			</template>
		</el-dialog>
		
		<el-row justify="space-between" style="margin-top: 2rem;">
			<el-col :span="10"><h1>类型管理</h1></el-col>
			<el-col :span="3">
				<el-button type="success" @click="toadd()">
					<el-icon><circle-plus /></el-icon>添加一层类型
				</el-button>
			</el-col>
		</el-row>
		<el-row>
			 <el-table
			  :data="newMenu"
			  style="width: 100%"
			  row-key="id"
			  border
			  lazy
			  :default-expand-all="true"
			>
			  <el-table-column label="书本类型" prop="name"/>
			  <el-table-column label="类型ID" prop="id"/>
			  <el-table-column label="优先级ID" prop="prio"/>
			  <el-table-column label="添加子节点" width="100" align="center">
			  	<template #default="scope">
			  		<el-button size="small" type="primary"
					@click="addChildType(scope.row)"
					v-if="scope.row.children || scope.row.pid==0">
					<el-icon><plus /></el-icon>
					</el-button>
			  	</template>
			  </el-table-column>
			  <el-table-column label="修改" width="100" align="center">
			  	<template #default="scope">
			  		<el-button size="small" type="warning"
					@click="updateType(scope.row)">
					<el-icon><edit /></el-icon>
					</el-button>
			  	</template>
			  </el-table-column>
			</el-table>
		</el-row>
	</div>
</template>

<script>
import qs from 'qs';
import { ElMessage } from 'element-plus';
import {Plus,Edit,CirclePlus} from '@element-plus/icons-vue';
export default{
	name:'Type',
	components:{Plus,Edit,CirclePlus},
	data(){
		return {
			showAddView:false,
			types:[],
			newMenu:[],
			form:{
				id:0,
				type:'',
				pid:0,
				prio:100,
				plabel:'新一层节点'
			}
		}
	},
	methods:{
		//多级菜单格式化
		getMenu(id,arr){
			if(id===0){
				//第一级菜单
				this.types.forEach(item=>{
					if(item.pid===0){
						arr.push({id:item.id,name:item.type,prio:item.prio,pid:item.pid})
					}
				})
				//再第一级菜单完成之后，从第一级的第一个菜单进入
				this.getMenu(this.newMenu[0].id,this.newMenu)
			}else{
				//其他他等级的菜单
				//1.循环等级数组，给每个第一级找到第二级
				arr.forEach((item,i)=>{
					//2.将list整个循环，将每一条数据都给等级作比较
					this.types.forEach((val,k)=>{
						//判断父级的id === 数据的pid
						if(item.id === val.pid){
							//声明一个下一维度的数组
							if(!item.children)item.children = [];
							item.children.push({id:val.id,name:val.type,prio:val.prio,pid:val.pid});
						}
					})
					if(item.children){
						this.getMenu(1,item.children);
					}
				})
			} 
		},
		toadd(){
			this.showAddView=true,
			this.form = {
				id:0,
				type:'',
				pid:0,
				prio:100,
				plabel:'新一层节点'
			}
		},
		//添加一层类型
		addType(){
			//提交数据
			this.axios.post('/api/adm/type/add',qs.stringify(this.form)).then((res)=>{
				this.PushMsg('success',res.data.msg);
				this.types = res.data.data;
				this.newMenu = [];
				this.getMenu(0,this.newMenu);
				this.showAddView = false;
				//将数据恢复默认
				this.form = {
					id:0,
					type:'',
					pid:0,
					prio:100,
					plabel:'新一层节点'
				}
			}).catch((err)=>{
				//console.log(err);
			});
			
		},
		//添加子节点
		addChildType(obj){
			this.form = {
				id:0,
				type:'',
				pid:obj.id,
				prio:110,
				plabel:obj.name
			}
			this.showAddView = true
		},
		//修改类型信息
		updateType(obj){
			this.form = {
				id:obj.id,
				type:obj.name,
				pid:obj.pid,
				prio:obj.prio,
				plabel:'新一层节点'
			}
			this.showAddView = true
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		},
	},
	created() {
		this.axios.get('/api/adm/type/findAll2').then((res)=>{
			if(res.status==200){
				this.types = res.data.data;
				this.getMenu(0,this.newMenu);
			}else{
				this.PushMsg('error',"获取类型数据失败！")
			}
		}).catch((err)=>{
			//console.log(err);
			this.PushMsg('error',"获取类型数据失败！")
		});
	}
}
</script>

<style scoped>
.el-form .from-item{
	margin: 15px 0;
}
.from-item label{
	line-height: 25px;
	width: 80px;
	font-size: 13px;
}
</style>
